<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_3778984_ccc3esej5ss/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f5f6fa;
        }

        header {
            width: 100%;
            height: 40px;
            background-color: #0099cc;
            color: white;
            line-height: 40px;
        }

        header .logo {
            width: 10%;
            height: 100%;
            text-align: center;
            font-size: 20;
            font-weight: 800;
            float: left;
        }

        header .user {
            width: 90%;
            float: right;

        }

        header .user .zuo {
            float: left;
            /* width: 50px; */
            height: 100%;
            /* color: blue; */
            /* background-color: blue; */
            margin-left: 20px;
        }

        header .user .you {
            float: right;
            /* width: 400px; */
            height: 100%;
            margin-right: 20px;
            /* background-color: red; */
        }

        main .left {
            width: 10%;
            background-color: #2c3e50;
            float: left;
            height: 900px;
        }

        main .left ul {
            list-style: none;
            font-size: 14px;
            color: white;
        }
        
        main .left ul li {
            padding-left: 15px;
            height: 40px;
            line-height: 40px;
            cursor:context-menu;
            transition: all 0.2s;
            
        }
        main .left ul li:hover{
            background-color: #0188ad;
        }
        main .left ul li .navzuo{
            margin-right: 10px;
        }
        main .left ul li .icon-youjiantou {
            margin-left: 30px;
        }

        main .right {
            width: 90%;
            height: 900px;
            /* background-color: #246d81; */
            float: right;

        }

        main .right .top {
            height: 30px;
            background-color: white;
            line-height: 30px;
        }

        main .right .top .zuo {
            display: flex;
            float: left;
        }

        main .right .top .back {
            width: 30px;
            height: 30px;
            /* background-color: red; */
            text-align: center;
        }

        main .right .top .welcome {
            background-color: #2c3e50;
            color: white;
            width: 80px;
            height: 30px;
            text-align: center;
        }

        main .right .top .you {
            display: flex;
            float: right;
        }

        main .right .top .you .next {
            width: 30px;
            height: 30px;
            text-align: center;
        }

        main .right .top .you .caozuo {
            width: 80px;
            height: 30px;
            text-align: center;
        }

        main .right .box {
            height: 60px;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

        main .right .box1 {
            width: 23%;
            height: 100%;
            background-color: #0096c0;
            padding: 10px;
            border-radius: 10px;
            transition: all 0.5s;
        }
        main .right .box1:hover{
            background-color: #02acdb;
        }
        main .right .box1:nth-child(2){
            transition: all 0.5s;
            background-color: #0099cc;
        }
        main .right .box1:nth-child(2):hover{
            background-color: #03a7de;
        }
        main .right .box1:nth-child(3){
            transition: all 0.5s;
            background-color: #15c377;
        }
        main .right .box1:nth-child(3):hover{
            background-color: #17da86;
        }
        main .right .box1:nth-child(4){
            transition: all 0.5s;
            background-color: #909080;
        }
        main .right .box1:nth-child(4):hover{
            background-color: #abab99;
        }
        main .right .box1 .zuo {
            float: left;
            color: white;
        }

        main .right .box1 .zuo p:nth-child(1) {
            font-size: 12px;
        }

        main .right .box1 .zuo p:nth-child(2) {
            font-size: 18px;
        }

        main .right .box1 .you {
            float: right;
        }

        main .right .tu {
            width: 100%;
            height: 400px;
            /* background-color: rgb(198, 241, 198); */
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        main .right .tu .tu1 {
            background-color: white;
            width: 48%;
            height: 100%;
        }

        main .right .biao {
            margin: 0 auto;
            margin-top: 20px;
            width: 98%;
            height: 370px;
            background-color: rgb(255, 255, 255);
            font-size: 14px;
        }
        main .right .biao table{
            margin-left: 40px;
        }
        table{
            border-collapse:collapse;
        }
        thead{
            font-weight: 800;
        }
        tr{
            height: 40px;
            
        }
        
        thead tr{
            border-bottom: 2px solid rgb(210, 209, 209);
        }
        tbody tr{
            border-bottom: 1px solid rgb(210, 209, 209);
            transition: all 0.3s;
        }
        tbody tr:hover{
            background-color: rgb(238, 238, 238);
        }
        tr td:nth-child(1){
            width: 100px;
            /* background-color: aqua; */
        }
        tr td:nth-child(2){
            width: 250px;
            /* background-color: beige; */
        }
        tr td:nth-child(3){
            width: 250px;
        }
        tr td:nth-child(4){
            width: 250px;
        }
        tr td:nth-child(5){
            width: 200px;
        }
        tr td:nth-child(6){
            width: 200px;
        }
        /* 设置不同状态下的颜色 */
        td .state{
            background-color: rgb(0, 255, 0);
            padding:2px 5px;
            border-radius: 5px;
            color: white;
        }
        td .staten{
            background-color: rgb(225, 0, 0);
        }
        td .staten1{
            background-color: rgb(89, 100, 255);
        }
        button{
            background-color: #0096c0;
            border: 0;
            padding: 4px;
            color: white;
            margin-top: 10px;
            margin-left: 400px;
        }
        .box1 .iconfont{
            font-size: 25px;
            color: white;
            
        }
    </style>
</head>

<body>
    <header>
        <div class="logo">后台管理系统</div>
        <div class="user">
            <div class="zuo"><span class="navzuo iconfont icon-liebiao"></span></div>
            <div class="you">当前用户：bootstrap中文 角色：管理员</div>
        </div>
    </header>
    <main>
        <div class="left">
            <ul>
                <li><span class="navzuo iconfont icon-shouye"></span>后台首页<span class="iconfont icon-youjiantou"></span></li>
                <li><span class="navzuo iconfont icon-yuansu"></span>设计元素<span class="iconfont icon-youjiantou"></span></li>
                <li><span class="navzuo iconfont icon-pen"></span>表单元素<span class="iconfont icon-youjiantou"></span></li>
                <li><span class="navzuo iconfont icon-kaiqipingmu"></span>示例页面<span class="iconfont icon-youjiantou"></span></li>
                <li><span class="navzuo iconfont icon-xiaosuolvetu"></span>常用列表<span class="iconfont icon-youjiantou"></span></li>
                <li><span class="navzuo iconfont icon-js"></span>脚本插件<span class="iconfont icon-youjiantou"></span></li>
                <li><span class="navzuo iconfont icon-tubiao"></span>统计图表<span class="iconfont icon-youjiantou"></span></li>
            </ul>
        </div>
        <div class="right">
            <div class="top">
                <div class="zuo">
                    <div class="back"><span class="navzuo iconfont icon-sanjiaoleft"></span></div>
                    <div class="welcome">欢迎首页</div>
                </div>
                <div class="you">
                    <div class="caozuo">页签操作</div>
                    <div class="next"><span class="navzuo iconfont icon-sanjiaoright"></span></div>
                </div>

            </div>
            <div class="box">
                <div class="box1">
                    <div class="zuo">
                        <p>今日收入</p>
                        <p>100,000.00</p>
                    </div>
                    <div class="you">
                        <span class="iconfont icon-qiandai"></span>
                    </div>
                </div>
                <div class="box1">
                    <div class="zuo">
                        <p>今日收入</p>
                        <p>100,000.00</p>
                    </div>
                    <div class="you">
                        <span class="iconfont icon-qian"></span>
                    </div>
                </div>
                <div class="box1">
                    <div class="zuo">
                        <p>今日收入</p>
                        <p>100,000.00</p>
                    </div>
                    <div class="you">
                        <span class="iconfont icon-qian1"></span>
                    </div>
                </div>
                <div class="box1">
                    <div class="zuo">
                        <p>今日收入</p>
                        <p>100,000.00</p>
                    </div>
                    <div class="you">
                        <span class="iconfont icon-qian"></span>
                    </div>
                </div>
            </div>
            <div class="tu">
                <div class="tu1" id="con1"></div>
                <div class="tu1" id="con2"></div>
            </div>
            <div class="biao">
                <table>
                    <thead>
                        <tr>
                            <td>#</td>
                            <td>订单号</td>
                            <td>商品名称</td>
                            <td>下单日期</td>
                            <td>状态</td>
                            <td>处理情况</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>1</td>
                            <td>1</td>
                            <td>1</td>
                            <td>1</td>
                            <td>1</td>
                        </tr>
                    </tbody>
                </table>
                <button>上一页</button>
                <button>下一页</button>
            </div>
        </div>
    </main>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./promise封装.js"></script>
<script src="./data.js"></script>
<script>
    var e = echarts.init(con1)
    var e2 = echarts.init(con2)
    let content = document.querySelector('tbody')
    // 第一个图
    e.setOption({
        title: { //图表的标题
            text: '每月的收入',
            left: '10',
            top: '10'
        },
        legend: { //图例
            top: 30,
            // right:10,
        },
        xAxis: { //x轴设置
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
            splitLine: {
                show: true
            },
        },
        yAxis: { //y轴设置
            splitLine: {
                show: true
            }
        },
        series: [ //数据系列
            {
                name: '当前每月收入',
                barWidth: 15, //柱子的宽度
                // showBackground: true,//显示背景色
                backgroundStyle: {
                    //color: '',
                    // borderRadius: 20, //背景圆角
                },
                // itemStyle: {
                //     //borderRadius:[20,0,20,0],//边框圆角 
                //     borderRadius: [20],//边框圆角 
                // },
                color:'#7f9ddd',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2550, 1550, 1600, 3300, 4800, 3500, 1650, 2500, 2150, 1750, 3900, 1750]
            },
            {
                name: '同期每月收入',
                barWidth: 15, //柱子的宽度
                // showBackground: true,//显示背景色
                backgroundStyle: {
                    //color: '',
                    borderRadius: 20, //背景圆角
                },
                // itemStyle: {
                //     //borderRadius:[20,0,20,0],//边框圆角 
                //     borderRadius: [20],//边框圆角 
                // },
                color: '#c3e7ff',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2050, 1550, 1600, 3000, 4000, 3700, 1750, 2000, 2700, 2100, 3750, 3600]
            }
        ]
    });
    // 第二个图
    e2.setOption({
        title: {
            text: '每年收入走势',
            left: '10',
            top: '10'
        },
        legend: { //图例
            top: 30,
        },
        xAxis: {
            data: ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
            splitLine: {
                show: true
            }
        },
        yAxis: {
            splitLine: {
                show: true
            }
        },
        // 数据
        series: [
            // 折线图
            {
                name: '每年收入走势',
                type: 'line',
                data: [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 72, 60],
                symbolSize: 8,
                symbol: 'circle',//圆点形状
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#67cb00'
                    }
                }

            },
            {
                name: '每年同期收入走势',
                type: 'line',
                data: [46, 50, 52, 48, 40, 35, 65, 45, 58, 30, 72, 55],
                symbolSize: 8,
                symbol: 'circle',//圆点形状
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#909080'
                    }
                }

            }
        ]
    })
    // 渲染表格数据方法
    function runder(data){
        str = data.map(function(item){
            return `<tr>
                        <td>${item.id}</td>
                        <td>${item.number}</td>
                        <td>${item.name}</td>
                        <td>${item.date}</td>
                        <td><span class="state">${item.state}</span></td>
                        <td>${item.handling}</td>
                    </tr>`
        }).join('')
        content.innerHTML = str
        var states = document.querySelectorAll('.state')
        // console.log(states);
        for(let i = 0;i<data.length;i++){
            if(data[i].state=='已完成'){
                // document.querySelector()
            }
            else if(data[i].state=='发货中'){
                states[i].classList.add('staten1')
            }
            else{
                states[i].classList.add('staten')
            }
        }
    }
    // 调用
    runder(data.list)


</script>